<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core" 
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <ui:composition template="../templates/creatively-cabinet.xhtml">

        <ui:param name="pageTitle" value="Home"/>
        <ui:param name="webSiteTitle" value="X Files"/>


        <ui:define name="submenu">
            <h:form id="controll_panel_form" prependId="false">
                <ul>
                    <li id="files_tab" onclick="selectTab('files');"><h:commandLink id="control_files_link" value="Files" actionListener="#{cabinetController.filesLinkListener}">
                            <f:ajax render=":cabinetContentContainer :refresh_files_tree :files_list_form :request_by_file " />
                        </h:commandLink></li>

                    <li id="groups_tab" onclick="selectTab('groups');"><h:commandLink id="control_groups_link" value="Groups" actionListener="#{cabinetController.groupsLinkListener}">
                            <f:ajax render=":cabinetContentContainer :refresh_groups :groups_list_form :files_by_group"  />
                        </h:commandLink></li>
                    <li id="requests_tab" onclick="selectTab('requests');"><h:commandLink id="control_requests_link" value="Requests" actionListener="#{cabinetController.requestsLinkListener}">
                            <f:ajax render=":cabinetContentContainer"  />
                        </h:commandLink></li>
                    <li id="messages_tab" onclick="selectTab('messages');"><h:commandLink id="control_messages_link" value="Messages" actionListener="#{cabinetController.messagesLinkListener}">
                            <f:ajax render=":cabinetContentContainer :refresh_messages :messages_list_form :group_access_form"  />
                        </h:commandLink></li>
                    <li id="profile_tab" onclick="selectTab('profile');"><h:commandLink id="control_profile_link" value="Profile" actionListener="#{cabinetController.profileLinkListener}">
                            <f:ajax render=":cabinetContentContainer :change_info_form :change_password_form"  />
                        </h:commandLink></li>
                    <li id="history_tab" onclick="selectTab('history');"><h:commandLink id="control_history_link" value="History" actionListener="#{cabinetController.historyLinkListener}">
                            <f:ajax render=":cabinetContentContainer :history_table"  />
                        </h:commandLink></li>
                </ul>

            </h:form>

            <script type="text/javascript">
                var currentTab = 'files';
                $(document).ready(function() {
                    JSNAV.bind('tab', function(tab, arg) {
                        currentTab = tab || 'files';
                        $('#control_'+currentTab+'_link').click();
                        $('#controll_panel_form ul li').each(
                        function(i) {
                            $(this).removeClass('selected');
                        }
                    ); 
                        $('#'+currentTab+'_tab').addClass("selected");
                        
                    });
                    if(window.location.hash === '' || window.location.hash === '#') {
                        window.location.hash = '#;tab;files';
                    }
                });
            
                function selectTab(tab) {
                    window.location.hash = '#;tab;'+tab;
                }
            </script>

        </ui:define>
        <ui:define name="content">
            <h:panelGroup id="cabinetContentContainer">

                <h:panelGroup id ="user_files_tree" class="grid_12" rendered="#{cabinetController.tableVisible}" > 
                    <h1>Files</h1>
                    <div class="grid_9">
                        <h:form id="refresh_files_tree">
                            <div style="text-align: right;">
                                <h:commandLink value="refresh" class="btn btn-small" actionListener="#{filesBean.refreshAction()}">
                                    <i class="icon-refresh"></i>
                                    <f:ajax render=":refresh_files_tree :files_list_form :cabinetContentContainer" />
                                </h:commandLink>
                            </div>
                        </h:form>
                        <h:panelGrid id="files_tree_grid" columns="2" class="table table-hover grid_8" style="text-align: left;" >
                            <h:outputLabel id ="files_list_label" style="width: 300px;" class ="label label-info" value="Files List" />
                            <h:outputLabel id ="files_info_label" style="width: 350px;" class ="label label-info" value="Info" />

                            <h:form id="files_list_form" >
                                <ui:repeat var="item" value="#{filesBean.tableElements}" id="for" >
                                    <h:commandLink value="#{item.name}" actionListener="#{filesBean.processTreeNode(item)}" style="#{filesBean.fileStyle(item)}}">
                                        <f:ajax render=":file_info :request_by_file" execute="@form" />
                                    </h:commandLink>
                                    <br/>
                                </ui:repeat>
                            </h:form>

                            <h:panelGroup id="file_info">
                                <h:outputLabel value="ID: #{filesBean.currentFileID}" />
                                <h:outputLabel id="file_name" value="Name: #{filesBean.currentFileName}" />
                                <h:outputLabel value="Content type: #{filesBean.currentFileContType} " />
                                <h:outputLabel value="Size:  #{filesBean.currentFileSize}" />
                                <h:outputLabel value="CRC:  #{filesBean.currentFileCRC}" />
                                <h:outputLabel value="access type id:  #{filesBean.currentFileType}" />
                                <h:outputLabel value="Is folder:  #{filesBean.currentFileIsFolder}" /> 
                                <h:link outcome="operations/download.xhtml" value="Download" rendered="#{filesBean.currentFileID ne null}">
                                    <f:param name="file_id" value="#{filesBean.currentFileID}"/>
                                </h:link>
                            </h:panelGroup>
                        </h:panelGrid>
                    </div>

                    <div class="grid_2">
                        <h3>Operations:</h3>
                        <h:link class="button_green" outcome="/cabinet/operations/upload.xhtml" value="Upload File" style="width: auto; height: auto;">
                            <f:param name="parent" value="#{param['folder']}"/>
                        </h:link>
                    </div>
                    <p></p>
                    <div class="grid_12">
                        <h:form id="request_by_file">    
                            <h3>All your download requests for current file:</h3>
                            <h:panelGroup id="requests">
                                <table class="table table-striped" style="width: 760px;">
                                    <tr>
                                        <th style="text-align: center;"># ID</th>
                                        <th style="text-align: center;">File ID</th>
                                        <th style="text-align: center;">Date Requested</th>
                                        <th style="text-align: center;">Date Provided</th>
                                        <th style="text-align: center;">Status</th>
                                        <th style="text-align: center;">Link</th>
                                    </tr>
                                    <ui:repeat value="#{filesBean.downloadRequestsByFile}" var="downloadRequest">
                                        <tr>
                                            <td style="text-align: center;">#{downloadRequest.id}</td>
                                            <td style="text-align: center;">#{downloadRequest.file.fileId}</td>
                                            <td>#{downloadRequest.dateRequested}</td>
                                            <td>#{downloadRequest.dateProvided}</td>
                                            <td style="text-align: center;">#{downloadRequestBean.getStatusAsString(downloadRequest.status)}</td>
                                            <td>
                                                <a href="#{request.contextPath}/download?id=#{downloadRequest.id}">Download</a>
                                            </td>
                                        </tr>
                                    </ui:repeat>
                                </table>
                            </h:panelGroup>

                        </h:form>
                    </div>
                </h:panelGroup>

                <h:panelGroup id ="user_groups" rendered="#{cabinetController.groupsVisible}" >
                    <h1>Groups</h1>

                    <h:form id="refresh_groups">
                        <h:commandLink value="refresh" actionListener="#{userInfoBean.refreshAction()}" class="btn btn-small" style="margin-left: 60%;" >
                            <i class="icon-refresh"></i>
                            <f:ajax render=":groups_list_form :refresh_groups :cabinetContentContainer" />
                        </h:commandLink>
                    </h:form>
                    <h:panelGrid id="groups_grid"  columns="2" class="table table-hover" style="width: 600px; text-align: left;" >
                        <h:outputLabel id ="groups_list_label" style="width: 300px;" class ="label label-info" value="Groups List" />
                        <h:outputLabel id ="groups_info_label" style="width: 300px;" class ="label label-info" value="Info" />

                        <h:form id="groups_list_form" >
                            <ui:repeat var="item" value="#{userInfoBean.userGroups}" id="for_group" >
                                <h:commandLink value="#{item.name}" actionListener="#{userInfoBean.processGroupNode(item)}">
                                    <f:ajax render=":group_info :files_by_group" execute="@form" />
                                </h:commandLink>
                                <br/>
                            </ui:repeat>
                        </h:form>

                        <h:panelGroup id="group_info" >
                            <h:outputLabel value="ID: #{userInfoBean.currentGroup.groupId}" />
                            <h:outputLabel value="Name: #{userInfoBean.currentGroup.name}" />
                            <h:outputLabel value="Description:  #{userInfoBean.currentGroup.description}" /> 
                            <h:outputLabel value="Type:  #{userInfoBean.currentGroup.typeId.name}" /> 
                            <h:outputLabel value="Users info:" /> 
                            <ui:repeat var="item" value="#{userInfoBean.groupsUsers}" id="for_group_users" >
                                <h:outputLabel value="ID: #{item.userId}  Name: #{item.name} " />

                            </ui:repeat>
                        </h:panelGroup>
                    </h:panelGrid>
                    <p></p>
                    <div class="grid_12">
                        <h:form id="files_by_group">    
                            <h3>All your files for current group:</h3>
                            <h:panelGroup id="gr_files">
                                <table class="table table-striped" style="width: 760px;">
                                    <tr>
                                        <th style="text-align: center;">File ID</th>
                                        <th style="text-align: center;">Name</th>
                                        <th style="text-align: center;">Content type</th>
                                        <th style="text-align: center;">CRC</th>
                                        <th style="text-align: center;">Size</th>
                                        <th style="text-align: center;">Download</th>
                                        

                                    </tr>
                                    <ui:repeat value="#{userInfoBean.currentGroup.filesCollection}" var="fileSelected">
                                        <tr>
                                            <td style="text-align: center;">#{fileSelected.fileId}</td>
                                            <td style="text-align: center;">#{fileSelected.name}</td>
                                            <td style="text-align: center;">#{fileSelected.contentType}</td>
                                            <td style="text-align: center;">#{fileSelected.crc}</td>
                                            <td style="text-align: center;">#{fileSelected.size}</td>
                                            <td style="text-align: center;">
                                            <h:link outcome="operations/download.xhtml" value="Download">
                                                 <f:param name="file_id" value="#{fileSelected.fileId}"/>
                                            </h:link></td>

                                        </tr>
                                    </ui:repeat>
                                </table>
                            </h:panelGroup>

                        </h:form>
                    </div>
                </h:panelGroup>

                <h:panelGroup id ="user_requests" rendered="#{cabinetController.requestsVisible}" >
                    <h1>Download Requests</h1>

                    <h:panelGroup id="requests">
                        <table class="table table-striped grid_10">
                            <tr>
                                <th># ID</th>
                                <th>File ID</th>
                                <th>Name</th>
                                <th>Date Requested</th>
                                <th>Date Provided</th>
                                <th>Status</th>
                                <th>Link</th>
                            </tr>
                            <ui:repeat value="#{downloadRequestBean.downloadRequests}" var="downloadRequest">
                                <tr>
                                    <td style="text-align: center;">#{downloadRequest.id}</td>
                                    <td style="text-align: center;">#{downloadRequest.file.fileId}</td>
                                    <td style="text-align: center;">#{downloadRequest.file.name}</td>
                                    <td>#{downloadRequest.dateRequested}</td>
                                    <td>#{downloadRequest.dateProvided}</td>
                                    <td style="text-align: center;">#{downloadRequestBean.getStatusAsString(downloadRequest.status)}</td>
                                    <td>                                        
                                        <a href="#{request.contextPath}/download?id=#{downloadRequest.id}" >Download</a>
                                    </td>
                                </tr>
                            </ui:repeat>
                        </table>
                    </h:panelGroup>
                    <p style="font-size: smaller;" class="grid_2"><strong>Note:</strong> The request exists only two hours since the file got ready for download.<br/>
                        After 2 hours it will expire and you will have to request the file again.</p>
                </h:panelGroup>


                <h:panelGroup id ="user_messages" rendered="#{cabinetController.messagesVisible}" >
                    <h1>Messages</h1>

                    <h:form id="refresh_messages">
                        <h:commandLink value="refresh" actionListener="#{userInfoBean.refreshAction()}" class="btn btn-small" style="margin-left: 60%;" >
                            <i class="icon-refresh"></i>
                            <f:ajax render=":messages_list_form :group_access_form :cabinetContentContainer" />
                        </h:commandLink>
                    </h:form>
                    <h:panelGrid id="messages_grid"  columns="2" class="table table-hover" style="width: 600px; text-align: left;" >
                        <h:outputLabel id ="messages_list_label" style="width: 320px;" class ="label label-info" value="Message List" />
                        <h:outputLabel id ="messages_info_label" style="width: 320px;" class ="label label-info" value="Info" />

                        <h:form id="messages_list_form" >
                            <ui:repeat var="item" value="#{userInfoBean.userMessages}" id="for_messages" >
                                <h:commandLink value="message #{item.messageId}" actionListener="#{userInfoBean.processMessageNode(item)}">
                                    <f:ajax render=":messages_info :group_access_form" execute="@form" />
                                </h:commandLink>
                                <br/>
                            </ui:repeat>
                        </h:form>

                        <h:panelGroup id="messages_info" >
                            <h:outputLabel value="ID: #{userInfoBean.currentMessage.messageId}" />
                            <h:outputLabel value="Date Send: #{userInfoBean.currentMessage.dateSend}" />
                            <h:outputLabel value="Date Resieved: #{userInfoBean.currentMessage.dateRecieved}" />
                            <h:outputLabel value="Sender: #{userInfoBean.currentMessage.senderId.userId}" />
                            <h:outputLabel value="Message: #{userInfoBean.currentMessage.message}" />
                            <h:form id="group_access_form">

                                <h:panelGroup class="btn-group">


                                    <h:commandLink value="Approve" class="btn btn-small" actionListener="#{userInfoBean.approveRequest()}" rendered="#{userInfoBean.groupDownloadRequest}">
                                        <f:ajax execute="@form" render="@form"/>
                                    </h:commandLink>
                                    <h:commandLink value="Deny" class="btn btn-small" actionListener="#{userInfoBean.denyRequest()}" rendered="#{userInfoBean.groupDownloadRequest}">
                                        <f:ajax execute="@form" render="@form"/>
                                    </h:commandLink>
                                </h:panelGroup>   
                                <h:panelGrid columns="2">

                                    <h:outputLabel value="Input your password: " style="font-weight: bold; margin-top: 6px;"  rendered="#{userInfoBean.groupDownloadRequest}"/>
                                    <h:inputSecret value="#{userInfoBean.password}"  class="input-small" rendered="#{userInfoBean.groupDownloadRequest}"/>
                                </h:panelGrid>    
                                <h:messages id="messages1" class="message" title="Validation Errors" showDetail="true"
                                            style="margin-left: 0;" errorClass="message_bad" fatalClass="message_bad"
                                            warnClass="message_info" infoClass="message_good">
                                </h:messages>



                            </h:form>    
                        </h:panelGroup>
                    </h:panelGrid>
                </h:panelGroup>

                <h:panelGroup id ="user_profile" rendered="#{cabinetController.profileVisible}" >

                    <h1>Profile</h1>
                    <h:panelGroup id="user_profile_group">

                        <h:panelGroup id="user_group_info" style="width: 100%;">
                            <h:panelGrid id="user_info_grid" columns="2" class="table table-striped">
                                <h:outputLabel class="profileTableLeft" value="ID: " />
                                <h:outputLabel value="#{userInfoBean.userId}" style="text-align: left; width: 300px;" />
                                <h:outputLabel class="profileTableLeft" value="Name: " />
                                <h:outputLabel value="#{userInfoBean.userName}" />
                                <h:outputLabel class="profileTableLeft" value="Surname: " />
                                <h:outputLabel value="#{userInfoBean.surName}" />
                                <h:outputLabel class="profileTableLeft" value="Date of creation:  " />
                                <h:outputLabel value="#{userInfoBean.dateCreation}" />
                                <h:outputLabel class="profileTableLeft" value="Date suspended:  " />
                                <h:outputLabel value="#{userInfoBean.dateSuspend}" />
                                <h:outputLabel class="profileTableLeft" value="Email:  " />
                                <h:outputLabel value="#{userInfoBean.email}" />
                                <h:outputLabel class="profileTableLeft" value="Information: " /> 
                                <h:outputLabel value="#{userInfoBean.information}" /> 
                            </h:panelGrid>
                            <div style="width: 80%; text-align: right;">
                                <a id="change_button" class="button_green" href="javascript:void(0);" onclick="hideUserInfo();">Change Profile</a>
                            </div>
                        </h:panelGroup>


                        <h:panelGroup id="user_edit_group" style="width: 100%; display: none;">
                            <h:form id="change_info_form">
                                <h:panelGrid id="change_grid_info" columns="2" class="table table-striped">
                                    <h:outputLabel class="profileTableLeft" value="ID: " />
                                    <h:outputLabel value="#{userInfoBean.userId}" />
                                    <h:outputLabel class="profileTableLeft" value="Name: " />
                                    <h:inputText value="#{userInfoBean.userName}" />
                                    <h:outputLabel class="profileTableLeft" value="Surname: " />
                                    <h:inputText value="#{userInfoBean.surName}" />
                                    <h:outputLabel class="profileTableLeft" value="Date of creation:  " />
                                    <h:outputLabel value="#{userInfoBean.dateCreation}" />
                                    <h:outputLabel class="profileTableLeft" value="Date suspended:  " />
                                    <h:outputLabel value="#{userInfoBean.dateSuspend}" />
                                    <h:outputLabel class="profileTableLeft" value="Email:  " />
                                    <h:outputLabel value="#{userInfoBean.email}" />
                                    <h:outputLabel class="profileTableLeft" value="Information: " /> 
                                    <h:inputText value="#{userInfoBean.information}" /> 
                                </h:panelGrid>
                                <div style="width: 80%; text-align: right;">
                                    <h:commandLink onclick="hideUserForm()" id="save_button" class="button_green" value="Save" actionListener="#{userInfoBean.saveParametersAction}">
                                        <f:ajax render=":user_profile_group :change_info_form :change_password_form" execute=":change_info_form"/>
                                    </h:commandLink>
                                    <a href="javascript:void(0);" onclick="hideUserForm();" class="button_grey">Cancel</a>
                                </div>
                            </h:form>     
                        </h:panelGroup>
                        <p></p>
                        <h3>Change Password Form</h3>
                        <h:panelGroup id="user_change_password" style="width: 100%;">
                            <h:form id="change_password_form">
                                <h:messages id="messages" title="Errors" showDetail="true"
                                            style="margin-left: 0; list-style-type: none; width: 80%;" class="message"
                                            errorClass="message_bad" infoClass="message_good"
                                            warnClass="message_info" fatalClass="message_bad">
                                </h:messages>
                                <h:panelGrid id="change_grid_info" columns="2" class="table table-striped">
                                    <h:outputLabel class="profileTableLeft" value="Old password:" />
                                    <h:inputSecret value="#{changePasswordBean.oldPassword}" />
                                    <h:outputLabel class="profileTableLeft" value="New password:" />
                                    <h:inputSecret value="#{changePasswordBean.newPassword}" />
                                    <h:outputLabel class="profileTableLeft" value="Confirm password:" />
                                    <h:inputSecret value="#{changePasswordBean.confirmPassword}" />
                                </h:panelGrid>
                                <div style="width: 80%; text-align: right;">
                                    <h:commandLink id="change_password_button" class="button_green" value="Apply new password" actionListener="#{changePasswordBean.changePasswordAction}">
                                        <f:ajax render=":change_password_form" execute="@form"/>
                                    </h:commandLink>
                                </div>
                            </h:form>   
                        </h:panelGroup>

                        <script type="text/javascript">
                            function hideUserInfo() {
                                $('#user_group_info').css('display', 'none');
                                $('#user_group_info').css('width', '100%');
                                $('#user_edit_group').css('display', 'inline-block');
                                $('#user_edit_group').css('width', '100%');
                                $('#change_button').css('display', 'none');
                                $('#save_button').css('display', 'inline-block');
                            }
                            function hideUserForm() {
                                $('#user_group_info').css('display', 'inline-block');
                                $('#user_group_info').css('width', '100%');
                                $('#user_edit_group').css('display', 'none');
                                $('#user_edit_group').css('width', '100%');
                                $('#change_button').css('display', 'inline-block');
                                $('#save_button').css('display', 'none');
                            }
                        </script>
                    </h:panelGroup>  
                </h:panelGroup>
                <h:panelGroup id ="user_history" rendered="#{cabinetController.historyVisible}" >
                    <h1>History</h1>

                    <h:form id="history_table"> 
                        <h:panelGroup class="btn-group">
                            <h:commandLink class="btn btn-small" style="margin-left: 64%; margin-bottom: 17px;" actionListener="#{userInfoBean.previousAction()}">
                                <i class="icon-arrow-left" />
                                <f:ajax render=":user_history :history_table" />
                            </h:commandLink>
                            <h:commandLink class="btn btn-small" style="margin-bottom: 17px;" actionListener="#{userInfoBean.nextAction()}">
                                <i class="icon-arrow-right" />
                                <f:ajax render=":user_history :history_table" />
                            </h:commandLink>
                            <h:commandLink value="refresh" class="btn btn-small" actionListener="#{userInfoBean.refreshAction()}"  style="margin-bottom: 17px;">
                                <i class="icon-refresh"></i>
                                <f:ajax render=":history_table :cabinetContentContainer" />
                            </h:commandLink>
                            <a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#" style="margin-bottom: 17px;">
                                Show
                                <span class="caret"></span>
                            </a>

                            <ul class="dropdown-menu has-tip" style="margin-left: 92%; width: 63px;">
                                <div class="btn-group btn-group-vertical">

                                    <h:commandLink value="10" class="btn btn-mini" style="width: 21px;" actionListener="#{userInfoBean.setStepAction(10)}" >
                                        <f:ajax render=":user_history :history_table" />
                                    </h:commandLink>
                                    <h:commandLink value="20" class="btn btn-mini" style="width: 21px;" actionListener="#{userInfoBean.setStepAction(20)}" >
                                        <f:ajax render=":user_history :history_table" />
                                    </h:commandLink>

                                </div>


                            </ul>

                        </h:panelGroup>

                        <table class="table table-striped">
                            <tr>
                                <td><h:outputLabel style="width: 150px; font-weight:bold;" value="Log Id"/></td>
                                <td><h:outputLabel style="width: 150px; font-weight:bold;" value="Ip"/></td>
                                <td><h:outputLabel style="width: 150px; font-weight:bold;" value="Date"/></td>                                         
                                <td><h:outputLabel style="width: 150px; font-weight:bold;" value="Message"/></td>
                                <td><h:outputLabel style="width: 150px; font-weight:bold;" value="Action Name"/></td>
                            </tr>
                            <ui:repeat var="item" value="#{userInfoBean.nextHistoryElements}" id="for_history" >
                                <tr>
                                    <td><h:outputLabel style="width: 150px;" value="#{item.logId}"/></td>
                                    <td><h:outputLabel style="width: 150px;" value="#{item.ipAdress}"/></td>
                                    <td><h:outputLabel style="width: 150px;" value="#{item.dateCreation}"/></td>
                                    <td><h:outputLabel style="width: 150px;" value="#{item.message}"/></td>
                                    <td><h:outputLabel style="width: 150px;" value="#{item.typeActionId.name}"/></td>
                                </tr> 
                            </ui:repeat>
                        </table>
                        <h:outputLabel style="font-weight:bold; text-align: center" value="Page #{userInfoBean.historyPage} of #{userInfoBean.historyPagesCount}"/>
                    </h:form>    

                </h:panelGroup>
            </h:panelGroup>
        </ui:define>

    </ui:composition>

</html>
